<template>
  <div>
    <h1>部门表</h1>
    <el-form :inline="true" :model="section" class="demo-form-inline">
      <el-form-item label="公司">
        <el-input v-model="section.name" placeholder="公司"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="section.status" placeholder="状态">
          <el-option label="正常" value="1"></el-option>
          <el-option label="异常" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="id"
          label="ID"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="公司名"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="cperson"
          label="负责人">
      </el-table-column>
      <el-table-column
          prop="tel"
          label="联系电话">
      </el-table-column>
      <el-table-column
          prop="email"
          label="邮箱">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
      </el-table-column>
      <el-table-column
          prop="superiors"
          label="上级">
      </el-table-column>
      <el-table-column
          prop="sort"
          label="排序">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="toupdate(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="toadd(scope.row)" type="text" size="small">添加</el-button>
          <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="上级公司" :label-width="formLabelWidths">
          <el-input v-model="form.superiors" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司名" :label-width="formLabelWidths">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="负责人" :label-width="formLabelWidths">
          <el-input v-model="form.cperson" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" :label-width="formLabelWidths">
          <el-input v-model="form.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" :label-width="formLabelWidths">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidths">
          <el-select v-model="form.status" placeholder="状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="异常" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-dialog>



    <el-dialog title="添加" :visible.sync="dialogFormVisibles">
      <el-form :model="sections">
        <el-form-item label="上级公司" :label-width="formLabelWidths">
          <el-input v-model="section.superiors" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司名" :label-width="formLabelWidths">
          <el-input v-model="section.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="负责人" :label-width="formLabelWidths">
          <el-input v-model="section.cperson" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" :label-width="formLabelWidths">
          <el-input v-model="section.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" :label-width="formLabelWidths">
          <el-input v-model="section.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidths">
          <el-select v-model="section.status" placeholder="状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="异常" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "SectionView",
  data(){
    return{
      tableData:[],
      section:{},
      dialogFormVisible:false,
      form:{},
      formLabelWidth:'120px',
      dialogFormVisibles:false,
      formLabelWidths:'120px',
      sections:{},


    }
  },methods:{
    del(id){
      this.axios.post("/department/del?id="+id).then(()=>{
        this.$message.success("删除成功");
      })
    },
    add(){
      this.axios.post("/department/addSec?section="+this.sections).then(()=>{
        this.$message.success("添加成功");
        this.dialogFormVisibles=false;
      })
    },
    toadd(row){
      this.dialogFormVisibles=true;
      this.sections.superiors=row.name;
    },
    update(){
      this.axios.post("/department/update?section="+this.form).then(()=>{
        this.$message.success("修改成功");
        this.dialogFormVisible=false;
      })
    },
    toupdate(row){
      this.dialogFormVisible=true;
      this.form=row;
    },
    list(){
      this.axios.post("/department/list",this.section).then(res=>{
        this.tableData=res.data.data;
      })
    }
  },created() {
    this.list();
  }
}
</script>

<style scoped>

</style>